<template>
  <el-dialog
    title="查看监控日志"
    v-model="visible"
    top="10vh"
    width="1000px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-position="right"
      label-width="120px"
      v-loading="loading"
      :disabled="true"
    >
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="dataForm.projectName"></el-input>
      </el-form-item>
      <el-form-item label="页面url" prop="pageUrl">
        <el-input v-model="dataForm.pageUrl"></el-input>
      </el-form-item>
      <el-form-item label="接口地址" prop="apiUrl">
        <el-input v-model="dataForm.apiUrl"></el-input>
      </el-form-item>
      <el-form-item label="接口方法" prop="apiMethod">
        <el-input v-model="dataForm.apiMethod"></el-input>
      </el-form-item>
      <el-form-item label="接口请求参数" prop="apiParams">
        <!-- <highlightjs class="codeBlock" language="JavaScript" :autodetect="false" :code="dataForm.apiParams"></highlightjs> -->
        <Codemirror
          v-model="dataForm.apiParams"
          basic
          :style="{ width: '100%', maxHeight: '300px', fontSize: '16px' }"
          :extensions="extensions"
        />
      </el-form-item>
      <el-form-item label="接口header参数" prop="apiHeaderParams">
        <!-- <highlightjs class="codeBlock" language="Json" :autodetect="false" :code="dataForm.apiHeaderParams"></highlightjs> -->
        <Codemirror
          v-model="dataForm.apiHeaderParams"
          basic
          :style="{ width: '100%', maxHeight: '300px', fontSize: '16px' }"
          :extensions="extensions"
        />
      </el-form-item>
      <el-form-item label="接口返回信息" prop="apiInfo">
        <!-- <highlightjs class="codeBlock" language="Json" :autodetect="false" :code="dataForm.apiInfo"></highlightjs> -->
        <Codemirror
          v-model="dataForm.apiInfo"
          basic
          :style="{ width: '100%', maxHeight: '300px', fontSize: '16px' }"
          :extensions="extensions"
        />
      </el-form-item>
      <el-form-item label="操作人用户姓名" prop="userName">
        <el-input v-model="dataForm.userName"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, type PropType } from 'vue'
import { UPDATE_MODEL_EVENT } from 'cm/contants'
import { Plus } from '@element-plus/icons-vue'

import { getMonitoringLogInfo, type ICreateOrUpdateMonitoringLog } from '@/api/projectMonitoring'
import { ElMessage } from 'element-plus'
import appConfig from '@/config/index'

import { Codemirror } from 'vue-codemirror'
import { vue } from '@codemirror/lang-vue'
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from '@codemirror/theme-one-dark'

// 扩展
const extensions = [javascript(), oneDark];

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
    default: false
  },
  currId: {
    type: String,
    required: true,
    default: ''
  },
})

const emit = defineEmits([UPDATE_MODEL_EVENT, 'change'])

const visible = ref<boolean>(false)

const handleClose = () => {
  emit(UPDATE_MODEL_EVENT, false)
}

const defaultForm = {
  id: "",
  projectId: "",
  projectName: "",
  pageUrl: "",
  apiUrl: "",
  apiMethod: "",
  apiParams: "",
  apiHeaderParams: "",
  apiInfo: "",
  userId: "",
  userName: "",
}
// 表单逻辑
const dataForm = ref<ICreateOrUpdateMonitoringLog>({ ...defaultForm })

const loading = ref<boolean>(false)
// 查询首页内容详情
const getMonitoringLogInfoApi = async (currId: string) => {
  loading.value = true
  const res = await getMonitoringLogInfo(currId)
  loading.value = false
  if (res?.code === 200) {
    dataForm.value = res.data as ICreateOrUpdateMonitoringLog;
    dataForm.value.apiParams = JSON.stringify(JSON.parse(dataForm.value.apiParams), null, '\t') as string
    dataForm.value.apiHeaderParams = JSON.stringify(JSON.parse(dataForm.value.apiHeaderParams), null, '\t') as string
    dataForm.value.apiInfo = JSON.stringify(JSON.parse(dataForm.value.apiInfo), null, '\t') as string
    console.log(dataForm.value)
  }
}

watch(
  () => props.modelValue,
  async () => {
    visible.value = props.modelValue
    if (props.modelValue && props.currId) {
      await getMonitoringLogInfoApi(props.currId)
    }
  }
)
</script>

<style scoped lang="scss">
  .codeBlock {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;

    :deep(.hljs) {
      max-width: 100%;
      background-color: #f5f5f5
    }
  }
</style>
